<template>
  <view>
    <view class="title-box">
      <view class="left-title-box">选择送货时间</view>
      <view class="left-title-box right-title-box">运费：¥{{ curFreight }}</view>
    </view>
    <template>
      <view class="title-box">
        <view class="left-title-box">工作日</view>
      </view>
      <view class="item-content clearfix">
        <template
          v-for="(item, index) in curDeliverTimeList"
        >
          <view
            v-if="item.holidayType == 0"
            :key="index"
            :class="curDeliverTimeSelected.dateStr == item.dateStr ? 'class-item-select class-item' : 'class-item'"
            @click="selectItemFn(item)"
          >
            {{ item.label }}
          </view>
        </template>
      </view>
    </template>
    <template>
      <view class="title-box">
        <view class="left-title-box">非工作日</view>
      </view>
      <view class="item-content clearfix">
        <template
          v-for="(item, index) in curDeliverTimeList"
        >
          <view
            v-if="item.holidayType != 0"
            :key="index"
            :class="curDeliverTimeSelected.dateStr == item.dateStr ? 'class-item-select class-item' : 'class-item'"
            @click="selectItemFn(item)"
          >
            {{ item.label }}
          </view>
        </template>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  options: { styleIsolation: 'shared' }, //解决/deep/不生效**
  name: 'SelectDeliverTime',
  props: {
    deliverTimeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    freight: {
      type: Number,
      default: 0
    },
    deliverTimeSelected: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    curDeliverTimeList() {
      return this.deliverTimeList
    },
    curDeliverTimeSelected() {
      return this.deliverTimeSelected
    },
    curFreight() {
      return this.freight
    },
  },
  methods: {
    /*选择按钮方法*/
    selectItemFn(val) {
      val.changeType = this.curDeliverTimeSelected.changeType
      val.timePeriod = '00:00-23:59'
      this.$emit('update:deliverTimeSelected', val)
    },
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.class-item{
  width: 192rpx;
  height: 40rpx;
  line-height: 40rpx;
  margin-top: 20rpx!important;
  padding: 0 10rpx!important;
}
.class-item-select{
  padding: 0 10rpx!important;
  width: 188rpx;
  height: 36rpx;
  line-height: 36rpx;
}
/deep/ .u-radio-group{
  display: block;
}
/deep/.u-radio-group--row{
  display: block;
}
</style>
